<template>
  <div :style="{ height: height, width: width }">
    <div class="content">
      <div class="box-left">
        <div class="top">
          <div class="bg">
            <count-to
              :start-val="0"
              :end-val="999"
              :duration="3000"
              class="num"
            />
          </div>
          <p class="bg-text">国控点总数</p>
        </div>

        <div class="radius">
          <div v-for="(it, i) in stateControlled" :key="i" class="radius-item">
            <div class="item-label">
              <span
                :class="
                  i == 0
                    ? 'bgc4ebafa'
                    : i == 1
                    ? 'bgc4EDE7E'
                    : i == 2
                    ? 'bgc6BBDFC'
                    : ''
                "
              ></span>
              <div class="radius-item-text">{{ it.name }}</div>
            </div>
            <p>{{ it.num }}</p>
          </div>
        </div>
      </div>

      <div style="width: 55%" ref="tableBox">
        <el-table
          stripe
          :data="tableData"
          :height="height"
          :headerCellStyle="{
            backgroundColor: '#fff',
            fontSize: '12px',
          }"
          :row-style="{ height: '30px' }"
          :cell-style="{ padding: 0 }"
          style="width: 100%"
        >
          <el-table-column prop="city" label="城市"> </el-table-column>
          <el-table-column prop="value1" label="国控点数量"> </el-table-column>
          <el-table-column prop="value2" label="机械数量"> </el-table-column>
          <el-table-column prop="value3" label="工作中"> </el-table-column>
          <el-table-column prop="value4" label="未工作"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import CountTo from "vue-count-to";

const animationDuration = 6000;

export default {
  mixins: [resize],
  components: {
    CountTo,
  },
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
      stateControlled: [
        { name: "总数", num: 6911 },
        { name: "工作中", num: 5129 },
        { name: "未工作", num: 1902 },
      ],
      tableData: [
        {
          city: "成都",
          value1: "10",
          value2: "120",
          value3: "23",
          value4: "260",
        },
        {
          city: "绵阳",
          value1: "1230",
          value2: "2560",
          value3: "2120",
          value4: "2900",
        },
        {
          city: "德阳",
          value1: "1120",
          value2: "2567",
          value3: "2012",
          value4: "2890",
        },
        {
          city: "南充",
          value1: "4534",
          value2: "290",
          value3: "206",
          value4: "123",
        },
        {
          city: "乐山",
          value1: "1230",
          value2: "456",
          value3: "20",
          value4: "123",
        },
        {
          city: "眉山",
          value1: "457",
          value2: "1230",
          value3: "5670",
          value4: "120",
        },
        {
          city: "遂宁",
          value1: "1560",
          value2: "1230",
          value3: "2210",
          value4: "78",
        },
        {
          city: "攀枝花",
          value1: "170",
          value2: "210",
          value3: "2230",
          value4: "210",
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      // this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");

      this.chart.setOption({
        legend: {
          bottom: "10%",
          itemGap: 100,
          data: [{ name: "工作中" }],
          // formatter:(name)=>{
          //         let target;
          //         for(let i=0;i<this.echartsTwoData.length;i++){
          //             if(this.echartsTwoData[i].name === name){
          //                 target = this.echartsTwoData[i].value
          //             }
          //         }
          //         // let arr=["{a|"+target+"}","{b|"+name+"}"]
          //         let arr = [name+"(辆)"+"    "+"{b|"+target+"}"]
          //         return arr.join("\n")
          //     },
          // textStyle:{
          //     rich:{
          //       b:{
          //         fontSize:20,
          //         // color:'red',
          //         fontFamily:'myFirstFont'
          //       }
          //     }
          //   }
        },
        series: [
          {
            type: "gauge",
            center: ["50%", "40%"],
            startAngle: 240,
            endAngle: -60,
            radius: 50,
            min: 0,
            max: 60,
            splitNumber: 16,
            itemStyle: {
              color: "#4ff8f6",
            },
            progress: {
              //是否显示进度条。
              show: false,
              width: 30,
            },

            pointer: {
              show: false,
            },
            axisLine: {
              show: true,
              roundCap: true,
              lineStyle: {
                color: "#4ff8f6",
                // width: 10,
                // shadowColor: 'rgba(0, 0, 0, 0.5)',
                // shadowBlur: 10,
                // shadowOffsetX:-10,
                // shadowOffsetY:10
              },
            },
            axisTick: {
              //刻度样式

              distance: -30,
              splitNumber: 20,
              lineStyle: {
                width: 5,
                color: "#4ff8f6",
              },
            },
            splitLine: {
              //分隔线样式。
              show: true,
              distance: -50,
              length: 16,
              lineStyle: {
                width: 10,
                color: "#4ff8f6",
              },
            },
            axisLabel: {
              show: false,
              distance: -20,
              color: "#4ff8f6",
              fontSize: 20,
            },
            anchor: {
              show: false,
            },
            title: {
              show: true,
              offsetCenter: [0, "180%"],
              fontSize: 18,
              color: "#999",
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              height: "15%",
              borderRadius: 8,
              offsetCenter: [0, "-5%"],
              fontSize: 40,
              fontFamily: "myFirstFont",
              fontWeight: "bolder",
              formatter: "{value}",
              color: "auto",
            },
            data: [
              {
                value: 200,
                name: "国控点总数",
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  .box-left {
    width: 45%;
    .top {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .bg {
        width: 130px;
        height: 130px;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("../../assets/images/index/index_echarts.png");
        display: flex;
        justify-content: center;
        align-items: center;
        .num {
          font-size: 48px;
        }
      }
      .bg-text {
        width: 130px;
        font-size: 18px;
        text-align: center;
      }
    }
    .radius {
      display: flex;
      justify-content: center;
      align-items: center;
      .radius-item {
        width: 100px;
        font-size: 24;
        .item-label {
          display: flex;
          align-items: center;
          span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
          }
          .bgc4ebafa {
            background-color: #4ebafa;
          }
          .bgc4EDE7E {
            background-color: #4ede7e;
          }
          .bgc6BBDFC {
            background-color: #6bbdfc;
          }
          .radius-item-text {
            font-size: 14px;
            color: #303133;
          }
        }
        p {
          margin: 10px 0 0 10px;
        }
      }
    }
  }
}
</style>
